<template>
  <view class="club-member-list">
    <!-- 表头 -->
    <view class="header-row">
      <view class="header-cell name">姓名</view>
      <view class="header-cell projects">参赛项目</view>
      <view class="header-cell value">贡献值</view>
    </view>
    <!-- 列表 -->
    <view v-for="(member, idx) in memberList" :key="idx" class="member-item">
      <view class="member-row">
        <view class="avatar-name">
          <image class="avatar" :src="member.avatar" />
          <text class="member-name">{{ member.name }}</text>
        </view>
        <view class="projects">
          <view v-for="(item, i) in member.projects" :key="i" class="project-item">
            {{ item }}
          </view>
        </view>
        <view class="value">{{ member.value }}</view>
      </view>
      <view v-if="idx !== memberList.length - 1" class="divider"></view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  memberList: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="scss" scoped>
.club-member-list {
  background: #2D2E33;
  border-radius: 16rpx;
  padding: 0 0 16rpx 0;
  margin: 0 0 32rpx 0;

  .header-row {
        display: flex;
        align-items: center;
        background: #2D2E33;
        border-radius: 16rpx 16rpx 0 0;
        padding: 0 24rpx;
        height: 56rpx;
        font-size: 28rpx;
        color: #fff;
        font-weight: 600;

        .header-cell {
          text-align: left;
        }

        .name {
          width: 160rpx;
        }

        .projects {
          flex: 1;
          text-align: center;

        }

        .value {
          width: 120rpx;
          text-align: right;
        }
      }

      .member-item {
        padding: 0 24rpx;
        border-bottom: 1rpx solid #000;
        .member-row {
          display: flex;
          align-items: center;
          min-height: 100rpx;
          padding: 24rpx 0 16rpx 0;

          .avatar-name {
            display: flex;
            align-items: center;
            width: 160rpx;

            .avatar {
              width: 56rpx;
              height: 56rpx;
              border-radius: 50%;
              margin-right: 16rpx;
              background: #fff;
            }

            .member-name {
              font-size: 28rpx;
              color: #fff;
              font-weight: 500;
            }
          }

          .projects {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .project-item {
              font-size: 26rpx;
              color: #ccc;
              line-height: 36rpx;
              margin: 15rpx;
            }
          }

          .value {
            width: 120rpx;
            text-align: right;
            font-size: 30rpx;
            color: #ffd700;
            font-weight: 600;
          }
        }

        .divider {
          height: 2rpx;
          background: #333;
          margin: 0 0 0 0;
          border-radius: 1rpx;
          width: 100%;
        }
      }

}
</style> 